<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:replace="views/common/common :: head('MAIN MENU')">
</head>
<body style="margin:0;" >
<div class="container"  th:replace="views/common/common :: header('MAIN MENU')"></div>

<div class="container" style="margin-top:50px;">
    <div class="container"  th:replace="views/common/common :: upload"></div>
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#importModel">文件导入</button>
    <button class="btn btn-primary btn-lg" onclick="mq()" data-target="#mq">获取消息</button>
</div>


<div>
    <table class="table table-striped table-bordered table-condensed">
        <h2>用户列表</h2>
        <thead>
            <tr align="center">
                <th align="center">序号</th>
                <th>用户ID</th>
                <th>用户姓名</th>
                <th>身份证</th>
                <th>邮箱</th>
                <th>电话</th>
                <th>性别</th>
                <th>年龄</th>
                <th>婚姻状态</th>
                <th>生日</th>
            </tr>
        </thead>
        <tbody>
        <tr  th:each="user,userStat:${pageInfo.getList()}" align="center" onclick="oncli(this)" onmouseover="onOver(this)" onmouseout="onOut(this)">
            <td th:text="${pageInfo.startRow + userStat.index}"></td>
            <td th:text="${user.userid}"></td>
            <td th:text="${user.username}"></td>
            <td th:text="${user.tid}"></td>
            <td th:text="${user.email}"></td>
            <td th:text="${user.tel}"></td>
            <td th:switch="${user.sex}">
                <span th:case="1">男</span>
                <span th:case="0">女</span>
                <span th:case="*">未知</span>
            </td>
            <td th:text="${user.age}"></td>
            <td th:switch="${user.maritalstatus}">
                <span th:case="1">已婚</span>
                <span th:case="0">未婚</span>
                <span th:case="*">未知</span>
            </td>
            <td th:text="${#dates.format(user.birthdate, 'yyyy-MM-dd')}"></td>
        </tr>
        </tbody>
    </table>
    <ul class="pagination" >
        <!-- 上一页 -->
       <li class="page-item" th:classappend="${pageInfo.isFirstPage} ? 'disabled' : ''">
            <a href="javascript:void(0);" class="page-link" th:title="${pageInfo.isFirstPage} ? '已是第一页' : '上一页'" th:href="${pageInfo.isFirstPage} ? 'javascript:void(0)' : ('/main_menu?currentPage='+ ${pageInfo.prePage})">
                <span aria-hidden="true">«上一页</span>
            </a>
        </li>

        <!-- 迭代生成页码 -->
        <li class="page-item" th:each="i : ${#numbers.sequence(1, pageInfo.pages)}"
            th:classappend="${(pageInfo.pageNum) eq i} ? 'active' : ''" >
            <a class="page-link" th:attr="pageIndex=${i} - 1" th:title="'第'+${i}+ '页'" th:href="${(pageInfo.pageNum) eq i} ? 'javascript:void(0)' : ('/main_menu?currentPage='+ ${i})">
                <span th:text="${i}"></span>
            </a>
        </li>

        <!-- 下一页 -->
        <li class="page-item" th:classappend="${pageInfo.isLastPage} ? 'disabled' : ''">
            <a href="javascript:void(0);" class="page-link" aria-label="Next" th:title="${pageInfo.isLastPage} ? '已是最后一页' : '下一页'" th:href="${pageInfo.isLastPage} ? 'javascript:void(0)' : ('/main_menu?currentPage='+ ${pageInfo.nextPage})">
                <span aria-hidden="true">下一页»</span>
            </a>
        </li>
    </ul>
</div>



<div class="container" th:replace="views/common/common :: footer"></div>
</body>
<script type="text/javascript">
    $(function () {
        //0.初始化fileinput
    });

    function oncli(data) {
        if(!data.style.backgroundColor) {
            data.style.backgroundColor="red"
            return;
        }

        if(data.style.backgroundColor == "gray") {
            //data.style.backgroundColor=""
            data.style.backgroundColor="red"
            return;
        }

        if(data.style.backgroundColor == "red") {
            //data.style.backgroundColor=""
            data.style.backgroundColor=""
            return;
        }
    }

    function onOver(data) {
        if(data.style.backgroundColor && data.style.backgroundColor == "red") {
            //data.style.backgroundColor=""
            return;
        }
        data.style.backgroundColor="gray";//更改偶数行的背景颜色
    }

    function onOut(data) {
        if(data.style.backgroundColor && data.style.backgroundColor == "gray") {
            data.style.backgroundColor=""
            return;
        }
    }

    function mq() {
        $.ajax({
            type: "POST",
            url: "test.php",
            data: "",
            success: function(data){
                alert(data);
            }
        });

    }

</script>

</html>